<script setup lang="js">
import { ref } from 'vue'
import { genFileId } from 'element-plus'
import { getTopic,updateTopic,createTopic } from '@/api/Topic.js'
import { updateAnswer } from '@/api/Answer.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { topicStore } from '@/store/index.js'
import {getAllInformation} from '@/api/TopicInformation.js'
import { createJob } from '@/api/JobRecord.js'
import { baseURL } from '@/utils/request.js'
import { forEach } from 'lodash'
//参数定义-------------------------------------------------------------------------------------------------


const getTopicStore = topicStore()
//登录人信息
const user =  ref(JSON.parse(localStorage.getItem('userObj')));
///学生的作业记录
const workRecord=ref({
  jobContent:'',
  playerId:user.value.id,
})
const workdemo =
ref([{text:''},{text:''},{text:''},{text:''}])
const generateLink = (id)=>{
  return baseURL+'app/TopicInformation/MaterialDownload?Inforid='+id
}

const GetAllTopicIn =async() =>{
  try {
    const response = await fetch(baseURL+'app/TopicInformation/GetInfor');
    const data = await response.json();
    getTopicStore.TopicInfor = data
    console.log(getTopicStore.TopicInfor); // 检查获取到的数据
  } catch (error) {

    throw error; // 重新抛出错误，以便在调用方捕获
  }
}
GetAllTopicIn()

  const submitJob = async() =>{
    console.log(workdemo.value,'value');
  workRecord.value.topicId = getTopicStore.topic.id
  workdemo.value.forEach((item) => {
    workRecord.value.jobContent+=item.text+'\n'
  })

   const res = await createJob(workRecord.value)
   if(res.status===200){
    console.log(res)
    ElMessage({
          type: 'success',
          message: '提交成功',
        })
   }
   else{
    ElMessage({
          type: 'fail',
          message: '提交失败',
        })
   }
    
    console.log(getTopicStore.topic)
  }



//题目对象
const fileList = ref([]);
//答案对象
const answer = ref([{
  answerType:0,
   /// 水泥标准值
  cementValue:0,
  /// 水泥比例
  cementProportion:0,
  /// 水标准值值
  waterValue:0,
  /// 水比例
  waterProportion:0,
  /// 砂标准值
  sandValue:0,
  /// 砂比例
  sandProportion:0,
  /// 碎石标准值
  gravelValue:0,
  /// 碎石比例值
  gravelProportion:0,
  /// 偏差值
  DeviationValue:0
},{
  answerType:0,
   /// 水泥标准值
  cementValue:0,
  /// 水泥比例
  cementProportion:0,
  /// 水标准值值
  waterValue:0,
  /// 水比例
  waterProportion:0,
  /// 砂标准值
  sandValue:0,
  /// 砂比例
  sandProportion:0,
  /// 碎石标准值
  gravelValue:0,
  /// 碎石比例值
  gravelProportion:0,
  /// 偏差值
  DeviationValue:0
},{
  answerType:0,
   /// 水泥标准值
  cementValue:0,
  /// 水泥比例
  cementProportion:0,
  /// 水标准值值
  waterValue:0,
  /// 水比例
  waterProportion:0,
  /// 砂标准值
  sandValue:0,
  /// 砂比例
  sandProportion:0,
  /// 碎石标准值
  gravelValue:0,
  /// 碎石比例值
  gravelProportion:0,
  /// 偏差值
  DeviationValue:0
},{
  answerType:0,
   /// 水泥标准值
  cementValue:0,
  /// 水泥比例
  cementProportion:0,
  /// 水标准值值
  waterValue:0,
  /// 水比例
  waterProportion:0,
  /// 砂标准值
  sandValue:0,
  /// 砂比例
  sandProportion:0,
  /// 碎石标准值
  gravelValue:0,
  /// 碎石比例值
  gravelProportion:0,
  /// 偏差值
  DeviationValue:0
}])




//方法实现-----------------------------------------------------------------------------------------------------------


//  const beforeUpload= (file) => {
//     // 在这里可以执行一些判断逻辑，决定是否要上传
//     return false; // 如果不希望立即上传，返回 false
//   }

const handleSuccess = (response, file,fileList) => {
  // 这里的 response 就是接口返回的 DTO，你可以根据实际情况处理
  console.log('文件上传成功，返回的数据：', response['informationName']);
  // 将接口返回的数据赋值给 fileList
const newList = {
  id:response['id'],
  InformationName:response['informationName'],
  InformationPath:response['informationPath'],
  InformationType:response['informationType']
}
//fileList1.value.push(newList);
}
const wa = ref({})
// const getInfo = async () =>{
//   try {
//     wa.value = await getAllInformation()
//     //debugger;
//     console.dir(wa.value);
//     setTimeout(() => {
//       console.dir(wa);
      
//     }, 5000);
//   } catch (error) {
//     console.error(error);
//   }
  
// }
// getInfo()

const upload = ref()


const handleExceed = (files) => {
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
}

const input = ref('')
const formModel = ref({})

const tit = ref(5)


const TopicObj = ref({
  topicName:'',
  topicContent:''
})

const centerDialogVisible = ref(false)
const i = ref({})

const upWendang = (type) =>{
  return baseURL+'app/topic-information/save-flie?type='+type
}

const getType=(v)=>{
  TopicObj.value = getTopicStore.topic
  //获取TopicObj中的Anwers数组
  getTopicStore.currentArray = v
  
}
const getType1=(v)=>{
  TopicObj.value = getTopicStore.topic
  //获取TopicObj中的Anwers数组
    getTopicStore.currentArray = v
}
const JobIsOk = ()=>{
  if(getTopicStore.currentArray===0){
    getTopicStore.topicOk = true
    getTopicStore.topicOk1 = true
    getTopicStore.currentArray=1
  }
  else if(getTopicStore.currentArray===1){
    getTopicStore.topicOk2 = true
    getTopicStore.currentArray=2
  }
  else if(getTopicStore.currentArray===2){
    getTopicStore.topicOk3 = true
    getTopicStore.currentArray=3
  }
  else if(getTopicStore.currentArray===3){
    getTopicStore.formattedTime = false
    getTopicStore.topicOk4 = true
  }
}



//把选择的文件放到题目列表
const handleCheckedCitiesChange = (value) => {
  getTopicStore.topic.topicInformations=value
  console.log(getTopicStore.topic.topicInformations,'666');
}
const submitAnswer = async()=>{
  ElMessageBox.confirm(
    '确认要保存吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
       const res= await updateTopic(getTopicStore.topic)
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
      // 延迟刷新页面
      setTimeout(() => {
        window.location.reload();
      }, 1000); // 1000 毫秒即 1 秒钟
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '修改失败',
      })
    })
}
const CreateTopic = async()=>{

  ElMessageBox.confirm(
    '确认要提交吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      
      await createTopic(getTopicStore.topic)
      
      ElMessage({
        type: 'success',
        message: '修改成功',

      })// 延迟刷新页面
      setTimeout(() => {
        window.location.reload();
      }, 1000); // 1000 毫秒即 1 秒钟
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '修改失败',
      })
    })

}

</script>
<template>
  <el-row :gutter="20">
    <el-col :span="20">
      <!-- 第一块 -->
      <div class="grid-content_left">
        <div v-if="user.job == '0'">
          <h2>{{ getTopicStore.topic.topicName }}</h2>
          <div  class="text">{{ getTopicStore.topic.topicContent }}</div>
        </div>
        <div v-else>
          <label>标题</label>
          <el-input type="text" v-model="getTopicStore.topic.topicName">
          </el-input>
          <label>内容</label>
          <el-input rows="10" type="textarea" v-model="getTopicStore.topic.topicContent">
          </el-input>
        </div>
      </div>
      <!-- 二 -->
      <div class="grid-content_center">
        <div v-if="user.job == '1'" class="grid-content_top">
          <span  class="center_text" @click="getType(0)">计算配合比</span>
          <span  class="center_text" @click=" getType(1)">试拌配合比 </span>
          <span  class="center_text" @click="getType(2)">基准配合比</span>
          <span  class="center_text" @click="getType(3)">施工配合比</span>
        </div>
        <div v-else class="grid-content_top">
          <span v-if="user.job == '0'" class="center_text">答题进度：</span>

          <span  :class="getTopicStore.currentArray==0 ? 'center_text':'center_text_wei'" @click="getType1(0)">
            <img v-if="getTopicStore.topicOk1" src="@/assets/icon_isok.png" style="margin-right:5px;" alt="">计算配合比
          </span>

          <span v-if="getTopicStore.topicOk1" :class="getTopicStore.currentArray==1 ? 'center_text':'center_text_wei'" @click="getType1(1)">
            <img v-if="getTopicStore.topicOk2" src="@/assets/icon_isok.png" style="margin-right:5px;" alt="">试拌配合比 </span>
          <span v-else class="center_text_wei" >试拌配合比 </span>

          <span v-if="getTopicStore.topicOk2" :class="getTopicStore.currentArray==2 ? 'center_text':'center_text_wei'" @click="getType1(2)">
            <img v-if="getTopicStore.topicOk3" src="@/assets/icon_isok.png" style="margin-right:5px;" alt="">基准配合比</span>
          <span v-else class="center_text_wei" >基准配合比</span>

          <span v-if="getTopicStore.topicOk3" :class="getTopicStore.currentArray==3 ? 'center_text':'center_text_wei'" @click="getType1(3)">
            <img v-if="getTopicStore.topicOk4" src="@/assets/icon_isok.png" style="margin-right:5px;" alt="">施工配合比</span>
          <span v-else class="center_text_wei" >施工配合比</span>

          <span :class="getTopicStore.topicOk4 ? 'center_text':'center_text_buke'">结果核算</span>
        </div>
        <div class="grid-content">
          <h2 style="padding: 20px" v-if="user.job == '1'">知识点学习</h2>
          <h2 style="padding: 20px" v-else>答题过程</h2>
          <div class="grid-content-box" v-if="user.job == '1'">
            <div class="text">
              <div class="text-box">
                <p class="text-box-title">1.常用公式</p>
                <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  :action="upWendang(1)"
                  multiple
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="3"
                  :on-exceed="handleExceed"
                  :before-upload="beforeUpload"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">点击上传文档</el-button>
                  <template #tip>
                    <div class="el-upload__tip">jpg/png 最大只能上传500KB.</div>
                  </template>
                </el-upload>
                <p class="text-bottom">
                  <span>图标 &nbsp;</span>计算模块的设计思路-草案11,5B.pptx
                </p>
              </div>
            </div>
            <div class="text">
              <div class="text-box">
                <p class="text-box-title">2.计算案例</p>
                <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  :action="upWendang(2)"
                  multiple
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="3"
                  :on-exceed="handleExceed"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">点击上传文档</el-button>
                  <template #tip>
                    <div class="el-upload__tip">jpg/png 最大只能上传500KB.</div>
                  </template>
                </el-upload>
                <p class="text-bottom">
                  <span>图标 &nbsp;</span>计算模块的设计思路-草案11,5B.pptx
                </p>
              </div>
            </div>
            <div class="text">
              <div class="text-box">
                <p class="text-box-title">3.资料(图表)查询区</p>
                <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  :action="upWendang(0)"
                  multiple
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="3"
                  :on-exceed="handleExceed"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">点击上传文档</el-button>
                  <template #tip>
                    <div class="el-upload__tip">jpg/png 最大只能上传500KB.</div>
                  </template>
                </el-upload>
                <p class="text-bottom">
                  <span>图标 &nbsp;</span>计算模块的设计思路-草案11,5B.pptx
                </p>
              </div>
            </div>
          </div>
          <el-input
            rows="10"
            type="textarea"
            v-model="workdemo[getTopicStore.currentArray].text"
            v-else
          >
          </el-input>
        </div>
        <!--三-->
        <div class="computer">
          <div class="text">
            <form action="">
              <div class="text_form">
                <p>设置计算配合比范围:</p>
                <label
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水泥&nbsp;&nbsp;&nbsp;</label
                >
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].cementValue"
                  placeholder=""
                />
                <el-input v-else v-model="answer[getTopicStore.currentArray].cementValue" placeholder="" />
                <label>&nbsp;&nbsp;:&nbsp;&nbsp;水&nbsp;&nbsp;&nbsp;</label>
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].waterValue"
                  placeholder=""
                />
                <el-input v-else v-model="answer[getTopicStore.currentArray].waterValue" placeholder="" />
                <label>&nbsp;&nbsp;:&nbsp;&nbsp;砂&nbsp;&nbsp;&nbsp;</label>
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].sandValue"
                  placeholder=""
                />
                <el-input v-else v-model="answer[getTopicStore.currentArray].sandValue" placeholder="" />
                <label>&nbsp;&nbsp;:碎石&nbsp;&nbsp;</label>
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].gravelValue"
                  placeholder=""
                />
                <el-input v-else v-model="answer[getTopicStore.currentArray].gravelValue" placeholder="" />
                <span>&nbsp;&nbsp;&nbsp;&nbsp;(浮动区间值)</span>
              </div>
              <div class="text_form">
                <p>设置计算配合比范围:</p>
                <label
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;水泥&nbsp;&nbsp;&nbsp;</label
                >
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].cementProportion"
                  placeholder=""
                />
                <el-input
                  v-else
                  v-model="answer[getTopicStore.currentArray].cementProportion"
                  placeholder=""
                />
                <label>&nbsp;&nbsp;:&nbsp;&nbsp;水&nbsp;&nbsp;&nbsp;</label>
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].waterProportion"
                  placeholder=""
                />
                <el-input
                  v-else
                  v-model="answer[getTopicStore.currentArray].waterProportion"
                  placeholder=""
                />
                <label>&nbsp;&nbsp;:&nbsp;&nbsp;砂&nbsp;&nbsp;&nbsp;</label>
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].sandProportion"
                  placeholder=""
                />
                <el-input
                  v-else
                  v-model="answer[getTopicStore.currentArray].sandProportion"
                  placeholder=""
                />
                <label>&nbsp;&nbsp;:碎石&nbsp;&nbsp;</label>
                <el-input
                  v-if="user.job == '1'"
                  v-model="getTopicStore.topic.answers[getTopicStore.currentArray].gravelProportion"
                  placeholder=""
                />
                <el-input
                  v-else
                  v-model="answer[getTopicStore.currentArray].gravelProportion"
                  placeholder=""
                />
                <span>&nbsp;&nbsp;&nbsp;&nbsp;(浮动区间值)</span>
              </div>
              <!-- <p class="message-box">错误提示:xxx</p> -->
              <el-button
                class="message-submit"
                @click="submitAnswer()"
                v-if="user.job == '1' && getTopicStore.isnew == false"
              >
                保存题目修改
              </el-button>
              <el-button class="message-submit" @click="CreateTopic()" v-else-if="user.job == '1' && getTopicStore.isnew == true">
                新增题目提交
              </el-button>
              <el-button class="message-submit" @click="submitJob()" v-else-if="user.job == '0' && getTopicStore.topicOk4==true">
                提交作业记录
              </el-button>
              <el-button v-if="getTopicStore.topicOk4 !=true " class="message-submit" @click="JobIsOk()">
                计算结果验证
              </el-button>
            </form>
          </div>
          <el-dialog
            v-model="centerDialogVisible"
            width="70%"
            destroy-on-close
            show-close="false"
            center
          >
            <h2>1.常用公式</h2>
            <template #footer>
              <div class="computer_box">
                <el-table style="width: 100%" :data="filterTableData">
                  <el-table-column label="序号" prop="date" />
                  <el-table-column label="文档名称" prop="name" />
                  <el-table-column label="文件大小" prop="name" />
                  <el-table-column label="操作" align="right">
                    <el-button size="small">查看</el-button>
                    <el-button size="small" type="danger">删除</el-button>
                  </el-table-column>
                </el-table>
                <!-- <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  :action="upWendang(1)"
                  multiple
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="3"
                  :on-exceed="handleExceed"
                >
                  <el-button type="primary">点击上传文档</el-button>
                </el-upload> -->
              </div>
            </template>
          </el-dialog>
        </div>
      </div>
    </el-col>
    <el-col :span="4" v-if="user.job == '1'">
      <div class="grid-content_right">
        <div class="grid-content_right">
          <h3>知识点文档库</h3>
          <div class="grid-content_right">
            <div class="computer_box">
              <div class="computer_boxch">
                <!-- <p class="computer_common">1.常用公式</p>
                <sapn class="computer_all" @click="centerDialogVisible = true"
                  >查看全部></sapn
                > -->
              </div>
              <el-scrollbar style="height: 295px;">
                <el-checkbox-group v-model="getTopicStore.checkList"  @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in getTopicStore.TopicInfor" :key="item.id" :label="item">
                    {{ item.informationName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-scrollbar>
              <!-- <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <el-button type="primary">点击上传文档</el-button>
              </el-upload> -->
            </div>
            <!-- <div class="computer_box">
              <div class="computer_boxch">
                <p class="computer_common">1.常用公式</p>
                <sapn class="computer_all" @click="centerDialogVisible = true"
                  >查看全部></sapn
                >
              </div>
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <el-button type="primary">点击上传文档</el-button>
              </el-upload>
            </div> -->
            <!-- <div class="computer_box">
              <div class="computer_boxch">
                <p class="computer_common">1.常用公式</p>
                <sapn class="computer_all" @click="centerDialogVisible = true"
                  >查看全部></sapn
                >
              </div>
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <el-button type="primary">点击上传文档</el-button>
              </el-upload>
            </div> -->
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="4" v-else>
      <div class="grid-content_right">
        <div class="grid-content_right">
          <h3>资料查询下载区</h3>
          <div  class="grid-content_right">
            <el-link v-for="(item,index) in getTopicStore.topic.topicInformations" :key="index" :href="generateLink(item.id)" target="_blank">《{{ item.informationName }}》</el-link>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<style scoped lang="scss">
.grid-content_left {
  background-color: #eeeeee;
  padding: 14px 20px 20px 20px;
  text-align: left;

  h2 {
    font-size: 24px;
  }

  .text {
    margin-top: 14px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px;
  }
}
.grid-content_center {
  margin-top: 10px;
  background-color: #eeeeee;
  text-align: left;
  padding: 20px;

  .grid-content {
    margin-bottom: 20px;
  }

  .grid-content-box {
    display: flex;
    justify-content: space-between;

    .text {
      width: 32%;

      .text-box {
        background: #fff;

        .text-box-title {
          font-size: 16px;
          font-weight: bold;
          padding: 20px;

          .el-upload__tip {
            padding: 10px 0;
          }
        }

        .upload-demo,
        .text-bottom {
          padding: 0 20px;
        }

        .text-bottom {
          padding-bottom: 20px;
        }
      }
    }
  }

  .grid-content_top {
    display: flex;

    .center_text {
      display: flex;
      align-items: center;
      padding: 18px 80px;
      color: #fff;
      background: url("@/assets/icon_dianji.png");
      background-size: 100% 100%;
    }
    .center_text_wei{
      padding: 18px 80px;
      color: #fff;
      background: url("@/assets/icon_weixuanzhong.png");
      background-size: 100% 100%;
    }
  
    .center_text:nth-child(1) {
      padding: 18px 80px;
      background: url("@/assets/jvXing.png");
      background-size: 100% 100%;
      color: #fff;
    }
    .center_text_buke {
      padding: 18px 80px;
      background: url("@/assets/icon_bukexuanzhong.png");
      background-size: 100% 100%;
      color: #fff;
    }
    
  }
}

.grid-content_right {
  background-color: #eeeeee;
  height: 100%;
}
.el-checkbox-group{
  text-align: left !important;
  padding: 0 20px !important;
}
.computer {
  .text {
    background-color: #fff;

    .text_form {
      display: flex;
      align-items: center;
      padding: 20px;

      .el-input {
        width: 90px !important;
      }
    }

    .message-box {
      padding: 20px;
    }

    .message-submit {
      margin: 0 20px 20px 20px;
      background: #278282;
      padding: 20px 30px;
      font-size: 16px;
      color: #fff;
      border-radius: 5%;
    }
  }
}

.grid-content_right h3 {
  background-color: #92c5c5;
  padding: 15px;
  text-align: left;
}

.grid-content_book {
  font-size: 18px;
  font-weight: bold;
  color: #278282;
  padding: 10px 0;
  text-align: left;
}

.computer_box {
  height: 32%;
  background-color: #fff;
  margin: 10px;
  padding-bottom: 10px;

  .computer_boxch {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;

    .computer_common {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }

    .computer_all {
      font-size: 14px;
      color: #0095cc;
    }
  }
}
</style>